{include file="common:theader" /}
{include file="common:tside" /}
<!-- 引入样式 -->
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
    <div id="page-wrapper">
      <!-- 舆情日报 -->
      <!--*************************** content部分开始 ******************-->
      <div class="container-fluid" id="m_main">
        <div class="row m-t-20">
          <div class="col-sm-12">
            <div class="white-box">
              <h2 class="box-title m-b-20">门店/账号管理</h2>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">是否为区域门店合集：</label>
                    <select @change="is_group_change" id="is_group" class="selectpicker" data-style="form-control">
                      <option value="0" {if condition="$store.is_group==0"}selected{/if}>否</option>
                      <option value="1" {if condition="$store.is_group==1"}selected{/if}>是</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row" v-if="is_group==1">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">校区集合(多个校区名称用半角逗号分隔)：</label>
                    <textarea class="form-control" name="" id="" v-model="group_store"></textarea>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">联系人：</label>
                    <input type="text" class="form-control" placeholder="" v-model="contacts">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">账号名：</label>
                    <input type="text" class="form-control" placeholder="" v-model="account">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">联系电话：</label>
                    <input type="text" class="form-control" placeholder="" v-model="phone">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">登陆密码：</label>
                    <input type="text" class="form-control" placeholder="" v-model="password">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">门店名称</label>
                    <input type="text" class="form-control" placeholder="" v-model="name">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">门店地址(多个校区地址用半角逗号分隔)：</label>
                    <!-- <input type="text" class="form-control" placeholder="" v-model="address"> -->
                    <textarea class="form-control" name="" id="" v-model="address"></textarea>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">开始时间：</label>
                      <div class="input-group">
                        <input type="text" v-model="start_time" autocomplete="off" name="start" class="form-control input-group-input-date start_time" placeholder="请选择开始时间" value-format="yyyy-mm-dd hh:mm:ss">
                        <span class="input-group-btn input-group-btn-date">
                          <i class="mdi mdi-calendar-text"></i>
                        </span>
                      </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">截止时间：</label>
                      <div class="input-group">
                        <input type="text" v-model="end_time" autocomplete="off" name="end" class="form-control input-group-input-date end_time" placeholder="请选择结束时间" value-format="yyyy-mm-dd hh:mm:ss" >
                        <span class="input-group-btn input-group-btn-date">
                          <i class="mdi mdi-calendar-text"></i>
                        </span>
                      </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">最大老师数量：</label>
                    <input type="text" class="form-control" placeholder="" v-model="teacher_num">
                  </div>
                </div>
              </div>
              <div class="row m-t-40">
                <div class="col-sm-8 ta-c">
                  <button type="button" name="" class="btn btn-outline btn-primary m-r-40" @click="doSubmit()">提交</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- /.row -->
      </div>
      <!--*************************** content部分结束 ******************-->

      <!-- <footer class="footer text-center"> 2017 &copy; Ample Admin brought to you by themedesigner.in </footer> -->
    </div>
  {include file="common:js" /}
  {include file="common:footer" /}
  <script src="/assets/plugins/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
  <script src="/assets/plugins/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>

  <script type="text/javascript">
    var vm = new Vue({
      el: '#m_main',
      data() {
        return {
          sid: "",
          name: "",
          account: "",
          phone: "",
          contacts: "",
          address: "",
          password: "",
          api: "",
          teacher_num: "",
          start_time: "",
          end_time: "",
          is_group: "",
          group_store:"",
        }
      },
      mounted() {
        var url = location.search;   //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1)
        {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++)
            {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        if(theRequest.sid) {
          this.sid = theRequest.sid;
          this.requestData();
        }
        this.realizeDatePicker();
      },
      methods: {
        //实例化时间选择器
        realizeDatePicker() {
          var that = this;
          $('.start_time').datetimepicker({
            autoclose: true,
            startView: 2,
            maxView: 3,
            language: "zh-CN",
            format: "yyyy-mm-dd hh:ii"
          });
          $('.end_time').datetimepicker({
            autoclose: true,
            startView: 2,
            maxView: 3,
            language: "zh-CN",
            format: "yyyy-mm-dd hh:ii"
          });
        },
        requestData() {
          let that = this;
          axios.post('/dboard/ashop/info', {sid: this.sid},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            // console.log(res);
            if(res.data.Code == 0){
              console.log(res.data.Data.store)
              that.name = res.data.Data.store.name;
              that.account = res.data.Data.store.account;
              that.phone = res.data.Data.store.phone;
              that.contacts = res.data.Data.store.contacts;
              that.address = res.data.Data.store.address;
              that.teacher_num = res.data.Data.store.teacher_num;
              that.is_group = res.data.Data.store.is_group;
              that.group_store = res.data.Data.store.group_store;
              that.start_time = res.data.Data.store.start_time;
              that.end_time = res.data.Data.store.end_time;
              setTimeout(()=>{
                $('#is_group').selectpicker('refresh'); 
              },500); 
            }else{
              alert(res.data.Msg)
            }
          }).catch(err => {
            console.log(err);
          })
        },
        // 提交
        doSubmit(){
          var that = this;
          that.start_time = $('.start_time').val();
          that.end_time = $('.end_time').val();
          that.is_group = $('#is_group').find('option:selected').val();
          var param = {
            name: that.name,
            phone: that.phone,
            account: that.account,
            contacts: that.contacts,
            address: that.address,
            password: that.password,
            teacher_num: that.teacher_num,
            start_time: that.start_time,
            end_time: that.end_time,
            is_group: that.is_group,
            group_store: that.group_store,
          }
          if(that.sid) {
            param.sid = that.sid;
            that.api = "/dboard/ashop/edit";
          } else {
            that.api = "/dboard/ashop/doCreateStore";
          }
          console.log(param)
          axios.post(that.api, param,{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            // console.log(res);
            if(res.data.Code == 0){
              //请求成功
              alert(res.data.Msg);
              // window.location.href = '/index/index/get_daily_report_list';
              window.opener=null;
              window.close();
            }else{
              alert(res.data.Msg)
            }
          }).catch(err => {
            console.log(err);
          })
        },
        is_group_change(){
          this.is_group = $('#is_group').find('option:selected').val();
        }
      }
    })
  </script>
